<script setup>
import { ElButton, ElInput, ElTooltip } from 'element-plus'

import { Icon } from '@iconify/vue'
import { watch } from 'vue'

const props = defineProps({
	modelValue: {
		type: String,
		default: '',
	},
	placeholder: {
		type: String,
		default: '请输入',
	},
})

const value = ref(props.modelValue)

const emit = defineEmits(['search', 'reset', 'update:modelValue'])

const resetLoading = ref(false)
const searchLoading = ref(false)

watch(
	props,
	() => {
		emit('update:modelValue', props.modelValue)
		value.value = props.modelValue
	},
	{ deep: true }
)

const onSearch = () => {
	emit('search')
}

const onReset = () => {
	value.value = ''
	emit('update:modelValue', '')
	emit('reset')
}
</script>

<template>
	<div class="SearchBox">
		<ElInput
			v-model="value"
			style="width: 240px"
			:placeholder="props.placeholder"
			@input="(val) => emit('update:modelValue', val)"
			clearable
		/>
		<ElTooltip content="搜索" placement="top-start">
			<ElButton :loading="searchLoading" @click="onSearch">
				<Icon icon="ep:search" />
			</ElButton>
		</ElTooltip>
		<ElTooltip content="重置" placement="top-start">
			<ElButton :loading="resetLoading" @click="onReset">
				<Icon icon="ep:refresh-right" />
			</ElButton>
		</ElTooltip>
	</div>
</template>

<style lang="scss" scoped>
.SearchBox {
	display: inline-block;

	.el-button {
		margin-left: 10px !important;
	}
}
</style>
